import React from 'react';
import Api from 'Utils/api';
import { Table, Icon, message, Spin } from 'antd';
import { BUSINESS_TYPE, ALERT_LEVEL } from 'Constants/AlertTableFilter';
import moment from 'moment';
import EqualBorder from './../../../CommonComponents/EqualBorder';

const PAGE_SIZE = 10;
class MainPage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      totalCount: 0,
      data: [],
      currentPage: 1,
      businessType: '',
      level: '',
      areaData: [],
      govId: ''
    };
    this.init = ::this.init;
  }
  componentDidMount() {
    this.init();
    this.getBusinessArea();
  }
  init() {
    this.setState({ isLoading: true });
    const { currentPage, businessType, level, govId } = this.state;
    const query = {};
    query.limit = PAGE_SIZE;
    query.offset = (currentPage - 1) * PAGE_SIZE;
    if (businessType) { query.category = businessType; }
    if (level) { query.level = level; }
    if (govId) { query.gov_id = govId; }
    const api = new Api({
      method: 'GET',
      path: '/warning/enterprise/result',
      query,
      success: (res) => {
        this.setState({
          data: res.data_list,
          totalCount: res.total_count,
          isLoading: false
        });
      },
      error: (msg) => {
        message.error(msg);
        this.setState({ isLoading: false });
      }
    });
    api.run();
  }
  getBusinessArea() {
    const api = new Api({
      method: 'GET',
      path: '/justices/dept',
      success: (res) => {
        const newData = res.map((item) => {
          return {
            text: item.name,
            value: item.id
          };
        });
        this.setState({
          areaData: newData
        });
      },
      error: (msg) => {
        message.error(msg);
      }
    });
    api.run();
  }
  getAlertRule(id) {
    if (id === 2) {
      return {
        color: '#FF5400',
        label: '警示'
      };
    }
    if (id === 1) {
      return {
        color: '#FFE218',
        label: '预警'
      };
    }
    if (id === 3) {
      return {
        color: '#FF0000',
        label: '告警'
      };
    }
    return {
      color: '#FF5400',
      label: '警示'
    };
  }
  generatorColumns() {
    return [
      {
        title: '预警日期',
        dataIndex: 'warn_time',
        render: text => (
          <span>{moment(text).format('YYYY/MM/DD')}</span>
        )
      },
      {
        title: '企业类型',
        dataIndex: 'category',
        filters: BUSINESS_TYPE,
        filterIcon: <Icon type="caret-down" />,
        filterMultiple: false,
        render: text => (
          <span >{text}</span >
        )
      },
      {
        title: '企业名称',
        dataIndex: 'name',
        render: text => (
          <span >{text}</span >
        )
      },
      {
        title: '区域',
        dataIndex: 'gov_name',
        filters: this.state.areaData,
        filterIcon: <Icon type="caret-down" />,
        filterMultiple: false,
        render: text => (
          <span >{text}</span >
        )
      },
      {
        title: '预警等级',
        dataIndex: 'level',
        filters: ALERT_LEVEL,
        filterIcon: <Icon type="caret-down" />,
        filterMultiple: false,
        render: (text) => {
          const item = this.getAlertRule(text);
          return <span style={{ color: item.color, textAlign: 'center' }}>{item.label}</span>;
        },
      },
      {
        title: '操作',
        dataIndex: 'dispose',
        render: text => (
          <span >{text}</span >
        )
      }
    ];
  }
  handleTableChange(pagination, filters) {
    this.setState({
      currentPage: pagination.current,
      businessType: filters.category && filters.category.length > 0 ? filters.category[0] : '',
      level: filters.level && filters.level.length > 0 ? parseInt(filters.level[0], 10) : '',
      govId: filters.gov_name && filters.gov_name.length > 0 ? parseInt(filters.gov_name[0], 10) : '',
    }, () => { this.init(); });
  }
  render() {
    const columns = this.generatorColumns();
    return (
      <EqualBorder
        content={
          <Spin size="large" spinning={this.state.isLoading} tip="加载中...">
            <Table
              rowKey={record => record.id}
              columns={columns}
              bordered
              dataSource={this.state.data}
              pagination={{
                pageSize: PAGE_SIZE,
                total: this.state.totalCount,
                current: this.state.currentPage,
              }}
              onChange={this.handleTableChange.bind(this)}
            />
          </Spin>
        }
      />
    );
  }
}

export default MainPage;
